<template>
  <!-- 底部信息 -->
  <footer>
    <!-- 底部菜单 -->
    <div class="footer-menus">
      <!-- 联系信息 -->
      <div class="contact-us">
        <p class="menu-title">联系我们</p>
        <p>地址：中国XX省XX市XX路XX商务中心10号楼</p>
        <p>电话：+18618618611861</p>
        <p>传真：+18618618611861</p>
        <p>电子邮箱：admin@abc.com</p>
      </div>
      <!-- 导航菜单 -->
      <div class="service-menu footer-menu">
        <p class="menu-title">服务概览</p>
        <ul class="menu-items">
          <li><a href="#">网站建设</a></li>
          <li><a href="#">域名购买</a></li>
          <li><a href="#">网页设计</a></li>
          <li><a href="#">移动应用</a></li>
        </ul>
      </div>
      <div class="showcase-menu footer-menu">
        <p class="menu-title">成功案例</p>
        <ul class="menu-items">
          <li><a href="#">桌面网站</a></li>
          <li><a href="#">移动网站</a></li>
          <li><a href="#">科研项目</a></li>
          <li><a href="#">软件应用</a></li>
        </ul>
      </div>
      <div class="activity-menu footer-menu">
        <p class="menu-title">公司动态</p>
        <ul class="menu-items">
          <li><a href="#">信息公开</a></li>
          <li><a href="#">最近新闻</a></li>
          <li><a href="#">最新博客</a></li>
        </ul>
      </div>
      <div class="help-menu footer-menu">
        <p class="menu-title">帮助与支持</p>
        <ul class="menu-items">
          <li><a href="#">帮助中心</a></li>
          <li><a href="#">联系客服</a></li>
          <li><a href="#">文档资源</a></li>
        </ul>
      </div>
      <!-- 备案信息 -->
      <p class="icp-info">
        京ICP备 12345678901-1 号
      </p>
      <!-- 版权信息 -->
      <p class="rights">
        &copy; 2020 假城科技 - 响应式网络公司官网 版权所有
      </p>
      <!-- 返回顶部按钮 -->
      <div class="scrollToTop" ref="scrollToTop">
        <a href="#home" v-smooth-scroll><i class="fas fa-chevron-up"></i></a>
      </div>
    </div>
  </footer>
</template>

<script>
export default {
  props: [],
  data() {
    return {};
  },
  mounted() {
    const fn = () => {
      const scrollToTop = this.$refs.scrollToTop;
      // 显示返回顶部
      if (window.pageYOffset > 2000) {
        scrollToTop.style.display = "block";
      } else {
        scrollToTop.style.display = "none";
      }
    };
    window.addEventListener("scroll", fn);

    this.$once("hook:beforeDestroy", () => {
      window.removeEventListener("scroll", fn);
    });
  }
};
</script>

<style lang="scss" scoped>
@import "@/scss/_variables.scss";
/* ============= 底部区域 ================== */
/* 底部 */
footer {
  display: grid;
  margin-top: 80px;
  // margin-top: 124px;
  padding-top: 72px;
  padding-bottom: 24px;
  width: 100%;
  background-color: #181818;

  justify-items: center;
}

/* 底部菜单 */
.footer-menus {
  position: relative;
  display: grid;
  padding: 0 80px;
  max-width: 1180px;
  /* 5列布局 */

  grid-template-columns: 2fr repeat(4, 1fr);

  /* 导航菜单，靠右对齐 */
  .footer-menu {
    justify-self: end;
  }

  /* 一级菜单 */
  .menu-title {
    margin-bottom: 20px;
    color: white;
    font-weight: 500;
    font-size: 16px;
  }

  /* 联系我们，靠左对齐 */
  .contact-us {
    color: $text-color-lightest;

    justify-self: start;
    & p:not(:first-child) {
      padding-bottom: 16px;
    }
  }

  .menu-items {
    li {
      padding-bottom: 8px;
      list-style: none;

      a {
        color: $text-color-lightest;
        text-decoration: none;
        font-weight: 300;
      }
    }
  }

  /* 备案信息 */
  .icp-info {
    margin-top: 24px;
    margin-bottom: 16px;
  }

  /* 备案信息，版权信息 */
  .icp-info,
  .rights {
    color: white;
    /* 占满整行，-1代表最后一个编号 */

    grid-column: 1 / -1;
    /* 居中对齐 */
    justify-self: center;
  }
}

/* 联系我们，文字 */
// .contact-us p:not(:first-child) {
//   padding-bottom: 16px;
// }

/* 菜单项 */
// .menu-items li {
//   padding-bottom: 8px;
//   list-style: none;
// }
// /* 菜单链接 */
// .menu-items li a {
//   color: $text-color-lightest;
//   text-decoration: none;
//   font-weight: 300;
// }

/* 返回顶部按钮，默认不显示 */
.scrollToTop {
  position: relative;
  z-index: 300;
  display: none;
}

/* 返回顶部按钮 */
.scrollToTop a {
  position: fixed;
  right: 30px;
  bottom: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 4px;
  background-color: $primary-color;
  color: white;
  text-decoration: none;
}
</style>
